<template>
    <!-- Echarts容器 -->
   <div class="charts" ref="myecharsale">
   </div>
</template>

<script>
import * as  echarts from 'echarts'

export default {
   name:'barChartSale',
   methods:{
       getEchart(){
            const myChartSale = echarts.init(this.$refs.myecharsale) 
            let  option = {
                grid:{ 
                    top:68,
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                    },
                // 图表的标题
                title: {
                    //主标题的设置
                    text: '年度销售额趋势',
                    subtext:'单位/(万元)',
                    //主标题的颜色
                    textStyle: {
                        color: '#303133',
                        fontSize:'18'
                    },
                    left: "left",
                },
               //提示组件
                tooltip: {
                    trigger: 'axis',
                    //坐标轴指示器配置项
                    axisPointer: {
                        type: 'shadow',
                        // shadowStyle:{
                        //     shadowBlur: 1
                        // }
                    }
               },
               xAxis: {
                    type: 'category',
                   axisTick: {
                       alignWithLabel: true
                   }
                }, 
               yAxis: {
                    type: 'value'
                },
               //  设置数据集
               dataset:{
                   source:[
                         ['月份','2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07','2022-08', '2022-09', '2022-10', '2022-11', '2022-12'],
                         ['销售额',2000, 1124, 589, 1655, 1111, 1990, 1088,1022, 1344, 1889, 2655, 2411]
                   ]
               },
                 // 系列的设置：绘制什么类型的图表、数据的展示在这里设置
                series: [
                    {
                        type: 'bar',
                        seriesLayoutBy: 'row',
                        barWidth:'50%',
                        itemStyle:{
                            color:'#409EFF'
                        }
                    }
                ]
            };
            myChartSale.setOption(option)
            window.addEventListener("resize", () => {//监听浏览器窗口大小
                if(myChartSale){
                    myChartSale.resize();
                }
            });
        }
   },
   mounted(){
       this.getEchart()
   }
}
</script>

<style scoped>
    .charts{
       margin-top: 10px;
       width: 100%;
       height:320px;
   }
</style>